<template>
	<view class="order">
		<uni-nav-bar left-icon="arrowleft" right-icon="search" title="审核订单列表" @clickLeft="back" @clickRight="find" :fixed="true" class="top"></uni-nav-bar>
		<view class="uni-flex">
			<view class="flex-item" :class="{ active: active == 0 }" @click="cut(0)"><text>全部</text></view>
			<view class="flex-item" :class="{ active: active == 1 }" @click="cut(1)"><text>正价</text></view>
			<view class="flex-item" :class="{ active: active == 2 }" @click="cut(2)"><text>代理商活动</text></view>
			<view class="flex-item" :class="{ active: active == 3 }" @click="cut(3)"><text>秒杀活动</text></view>
		</view>
		<view class="list" v-if="dataList.length!=0">
			<view class="li" v-for="(item, index) in dataList" :key="index">
				<view class="shop" @click="audit(item.id)">
					<image :src="item.image" class="imgthumb" :lazy-load = "true" mode="aspectFill"/>
					<view class="msg">
						<view class="order black">订单号：{{item.orderSn}}</view>
						<view class="type black">所属代理商：{{item.agentName}}</view>
						<view class="time gray ">提交时间：{{item.createdTime}}</view>
						<view class="number">
							共1件
							<view class="price">
								合计：
								<text>¥{{item.orderPrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="genre">
					<text class="type">类型：{{item.orderType.desp}}</text>
					<text class="type">状态：{{item.orderStatus.desp}}</text>

					<view class="audit" @click="audit(item.id)" v-if="item.orderStatus.value">审核</view>
				</view>
			</view>
		</view>
		<view class="notavailable" v-if="dataList.length==0">
			<image src="../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<view class="pagination" v-if="dataList.length!=0">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
	</view>
</template>

<script>
import { uniNavBar, uniIcons } from '@dcloudio/uni-ui';
import order from '../../servers/servers/order.js';
export default {
	components: { uniNavBar, uniIcons },
	data() {
		return {
			active: 0,
			dataList: [],
			object:new Object(),
			paging: {
				page: 1,
				total: 100
			}
		};
	},
	mounted() {
		
		this.getData();
		
	},
	methods: {
		getData(){
			this.dataList=[];/* 置为空 */
			this.object.currentPage= this.paging.page;
			this.object.pageSize=10;	
			uni.showLoading({
			    title: '数据加载中'
			});	
			order.initData(this.object)
				.then(res => {
					this.paging.total = Math.ceil(res.data.record.total / res.data.record.size);
					this.paging.page=res.data.record.current
					this.dataList=res.data.record.records.map(v => {
						v.image = this.imgCDNUrl + v.productImg;
						return v;
					});
					uni.hideLoading();
					
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		audit(e){
			/* var itemList= ['通过', '拒绝']
			uni.showActionSheet({
			    itemList: itemList,
			    success: function (res) {
			        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			        console.log(res);
					
					
			    },
			    fail: function (res) {
			        console.log(res.errMsg);
			    }
			}); */
			uni.setStorage({
			    key: 'servicedetails',
			    data: e,
			    success: function () {
			        uni.navigateTo({
			            url: './details'
			        });
			    }
			});
			/* uni.showModal({
			    content: '您确定要对该订单进行审核吗？',
				confirmColor: '#bd3c8c',
			    success: function (res) {
			        if (res.confirm) {
			            console.log('用户点击确定');
						
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			}); */
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		cut(e) {
			this.active = e;
			if(e!=0){
				this.object.orderType=e;
			}
			/* 分页重新开始 */
			this.paging.page=1;
			this.getData();
		},
		find() {
			uni.navigateTo({
				url: './orderfind'
			});
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				console.log(159);
				this.getData();
			}
			
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getData();
			}
			
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.order {
	.uni-flex {
		position: fixed;
		z-index: 1;
		top: 44px;
		width: 100%;
		display: flex;
		flex-direction: row;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		.flex-item {
			font-size: 28rpx;
			font-weight: 900;
			width: 25%;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			background: #ffffff;
		}
		.flex-item.active {
			text {
				color: #bd3c8c;
				border-bottom: 3rpx solid #bd3c8c;
			}
		}
	}
	.list {
		border-top: 80rpx solid #fff;
		padding: 0 20rpx;
		.li {
			padding: 50rpx 0;
			border-bottom: 1px solid #e1e1e1;
			.shop {
				position: relative;
				display: flex;
				flex-direction: row;
				image {
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
				}
				.msg {
					position: relative;
					width: 431rpx;
					margin-left: 37rpx;
					line-height: 46rpx;
					.order {
						font-size: 28rpx;
					}
					.type {
						font-size: 26rpx;
					}
					.gray {
						color: #999999;
						font-size: 26rpx;
						line-height: 42rpx;
					}
				}
				.number {
					position: absolute;
					bottom: 0;
					color: #999999;
					font-size: 26rpx;
					.price {
						display: inline-block;
						color: #333333;
						margin-left: 29rpx;
						text {
							font-size: 30rpx;
							color: #333333;
						}
					}
				}
			}
			.genre {
				position: relative;
				color: #bd3c8c;
				display: flex;
				flex-direction: row;
				padding-top: 57rpx;
				font-size: 24rpx;
				.type {
					width: 322rpx;
				}
				.audit {
					position: absolute;
					bottom: -15rpx;
					right: 0;
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					border: 1px solid #f70225;
					color: #f70225;
					text-align: center;
				}
			}
		}
		.li:nth-last-child(1) {
			border-bottom: none;
		}
	}
	.pagination {
		margin: 50rpx 20rpx;
		text-align: center;
		line-height: 80rpx;
		.center {
			width: 176rpx;
			height: 80rpx;
			display: inline-block;
			margin: 0 43rpx;
			color: #666666;
			background: #ffffff;
			border-radius: 6rpx;
			border: 1px solid #d0d0d0;
			box-sizing: border-box;
		}
		.left,
		.right {
			width: 220rpx;
			height: 80rpx;
			background: #bd3c8c;
			color: #fff;
			border-radius: 6rpx;
			box-sizing: border-box;
		}
		.forbid {
			background: #ffffff;
			border: 1px solid #d0d0d0;
			color: #aaaaaa;
			.icons {
				color: #aaaaaa !important;
			}
		}
	}
}
</style>
